<template>
  <div id="app">
    <ul-li :fileList="fileList"></ul-li>
    <transition name="fade"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <div class="box" v-show="show"></div>
    </transition>
    <button @click="show = !show">change</button>
    
  </div>
</template>

<script>
import ulLi from  '@/components/ul-li'
import fileList from '../mock/file'
import './assets/animate.css'
export default {
    components:{
        ulLi
    },
    data(){
        return {
        fileList,
        show:true
        }
    }
}
</script>

<style lang="scss">
.box{
  width:200px;
  height: 200px;
  background: red;
}

.fade-enter,.fade-leave-to{
  opacity: 0;
  width:100px;
  height: 100px;    
}

.fade-enter-active{
  animation: opacityAni 1s; 
}

.fade-leave-active{
  animation:opacityAni 1s reverse; 
}

.fade-enter-to,.fade-leave{
  opacity: 1;
  width:200px;
  height: 200px;
}

@keyframes opacityAni {
    0%{
      opacity: 0;
      width:100px;
      height: 100px;
    }
    50%{
      opacity: 0.5;
      width:150px;
      height: 150px;
    }
    100%{
      opacity: 1;
      width:200px;
      height: 200px;
    }
}

</style>
